<template>
  <div class="home">
  <div class="userInfo">
 <div class="left">
   <div class="top">
     <p>Hey,</p>
   </div>
   <div class="bottom">
     <a href="/register" class="zc" style="color: rgb(137, 133, 135);">注册</a>
     <a href="/login" class="dl" style="color:#024137">登录</a>
   </div>
 </div>
 <div class="right">
   <img src="@/assets/3.png" alt="">
 </div>
  </div>
   <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="banner in banners"
          :key="banner.bannerTitle"
        >
          <img :src="banner.imgName" alt="">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  <div class="mean">
    <div class="m">
      <img src="@/assets/6.png" alt="">
      <span>NEW</span>
      <span class="p1">新品</span>
    </div>
    <div class="m">
      <img src="@/assets/7.png" alt="">
      <span>HOT</span>
      <span class="p1">热门</span>
    </div>
    <div class="m">
      <img src="@/assets/8.png" alt="">
      <span>SALE</span>
      <span class="p1">特惠</span>
    </div>
    <div class="m">
      <img src="@/assets/9.png" alt="">
      <span>OTO</span>
      <span class="p1">零售</span>
    </div>
  </div>
  <div class="item-pick">
  <div class="top">
    <span>KOLSPICKS</span>
    <p>种草推荐</p>
  </div>
  <div class="bottom-list">
    <div class="bottom-wrap"
    v-for="prod in lists"
    :key="prod.prdName">
      <img :src="prod.mediumThumbnails" alt="">
      <p>{{prod.prdName}}</p>
        <p class="price">￥{{prod.salPrice}}</p>
        <i></i>
    </div>
  </div>
  </div>
  </div>
</template>

<script>
import { getBanners, getHomeList, getMianBanners } from '@/api/home'
import Swiper from 'swiper'
import 'swiper/swiper.scss'
export default {
  name: 'Home',
  data () {
    return {
      banners: [],
      lists: [],
      mainList: []
    }
  },
  created () {
    getBanners().then(res => {
      console.log(res)
      this.banners = res
      this.$nextTick(() => {
        /* eslint-disable-next-line */
        new Swiper('.swiper-container', {
          autoplay: true, // 自动轮播
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination'
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        })
      })
    })
    getHomeList().then(res => {
      console.log(res)
      this.lists = res
    })
    getMianBanners().then(res => {
      console.log(res)
      this.mainList = res
    })
  }
}
</script>

<style lang="scss" scoped>
 .home{
   .userInfo{
     width: 100%;
     height: 117px;
     display: flex;
     justify-content: space-between;
     .left{
       width: 275px;
       height: 117px;
       .top{
         width: 275px;
         height: 42px;
         p{
           height: 42px;
            font-size: 30px;
            font-weight: 700;
            color: #024137;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 16px;
            margin-top: 20px;
         }
       }
       .bottom{
         margin-left: 16px;
         margin-top:5px;
         .zc{
           font-size: 22px;
           text-decoration: none;
         }
         .dl{
           font-size: 22px;
           margin-left: 10px;
           text-decoration: none;
         }
       }
     }
     .right{
       width: 100px;
       height: 117px;
       img{
         width: 44px;
         height: 44px;
         margin-top: 14px;
         margin-left: 40px;
       }
     }
   }
    .swiper-container {
      width: 100%;
      height: 270px;
      padding-top: calc(100% * 375 / 530);
      position: relative;
      .swiper-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        img {
         width: 100%;
         height: 100%;
        }
      }
    }
    .mean{
      width: 100%;
      height:150px;
      display: flex;
      justify-content: space-around;
      margin-top: 40px;
      .m{
        width: 52px;
        height: 86px;
        display: flex;
        flex-direction: column;
        img{
          width: 52px;
          height: 52px;
        }
        span{
          color:#898587;
          font-size: 14px;
          line-height: 16px;
          margin-left: 10px;
          margin-top: 5px;
          font-family: SourceHanSansCN;
        }
        .p1{
              font-size: 11px;
              font-family: SourceHanSansCN;
              margin-left: 12px;
        }
      }
    }
    .item-pick{
      width: 375px;
      height: 613px;
      margin-top: -10px;
      span{
        font-size: 45px;
        color: #3e4147;
        letter-spacing: 1px;
        margin-left: 30px;
      }
      p{
        font-size: 16px;
        font-weight: bolder;
        color: #000;
        letter-spacing: 3px;
        margin-left: 30px;
        margin-top: 5px;
      }
    }
    .bottom-list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
       margin-top: 10px;
    .bottom-wrap{
        width: 170px;
        height: 283px;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(137,133,135,.3);
        margin-top: 10px;
        img{
          width: 148px;
          height: 148px;
          margin-left: 10px;
          margin-top: 10px;
        }
        p{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 1.1;
          word-break: break-all;
          color: #3e4147;
          font-family: SourceHanSansCN;
          height: 3em;
          font-size: 14px;
          margin-left: 10px;
          margin-bottom: 20px;
        }
        .price{
              color: #024137;
              font-size: 22px;
              font-weight: bolder;
        }
      }
    }
 }
</style>
